<template>
  <div class="common-layout__video">
    <el-container>
      <!-- 左侧主要页面 -->
      <el-container>
        <!-- 视频信息及播放器 -->
        <el-container>
          <el-container>
            <!-- 播放器 -->
            <el-main>
              <VideoPlayer
                  ref="videoPlayer"
                  :videoId="route.params.id"
              ></VideoPlayer>
            </el-main>
            <el-aside>
              <!-- 标题信息 -->
              <el-header class="video-info-header">
                <h3 class="text-hidden__3">{{ videoInfo.title }}</h3>
              </el-header>

              <el-footer class="video-info-footer">
                <ul>
                  <li>
                    <el-icon size="20px">
                      <VideoPlay/>
                    </el-icon>
                    <span>{{
                        " " + numberConversion(Number(videoInfo.viewCount))
                      }}</span>
                  </li>
                  <li>
                    <el-icon size="20px">
                      <Postcard/>
                    </el-icon>
                    <span>{{
                        " " + numberConversion(Number(videoInfo.barrageCount))
                      }}</span>
                  </li>
                  <li>
                    <el-icon size="20px">
                      <Clock/>
                    </el-icon>
                    <span>{{
                        " " + dateConversion(videoInfo.createTime)
                      }}</span>
                  </li>
                </ul>
                <ul>
                  <li>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="videoInfo.isLike ? '取消点赞' : '点赞'"
                        placement="top"
                    >
                      <div @click="videoLike">
                        <img
                            v-if="videoInfo.isLike"
                            class="obviously-beat"
                            src="@/assets/icon/like_on.svg"
                            alt=""
                        />
                        <img
                            v-else
                            class="obviously-beat"
                            src="@/assets/icon/like_off.svg"
                            alt=""
                        />
                        <span>{{
                            numberConversion(Number(videoInfo.likeCount))
                          }}</span>
                      </div>
                    </el-tooltip>
                  </li>
                  <li>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="videoInfo.isCollect ? '取消收藏' : '收藏'"
                        placement="top"
                    >
                      <div @click="videoCollect">
                        <img
                            v-if="videoInfo.isCollect"
                            class="obviously-beat"
                            src="@/assets/icon/collect_on.svg"
                            alt=""
                        />
                        <img
                            v-else
                            class="obviously-beat"
                            src="@/assets/icon/collect_off.svg"
                            alt=""
                        />
                        <span>{{
                            numberConversion(Number(videoInfo.collectCount))
                          }}</span>
                      </div>
                    </el-tooltip>
                  </li>
                  <li>
                    <!--                    <el-tooltip-->
                    <!--                      class="box-item"-->
                    <!--                      effect="dark"-->
                    <!--                      content="举报"-->
                    <!--                      placement="top"-->
                    <!--                    >-->
                    <!--                      <div>-->
                    <!--                        <el-icon size="25" color="grey">-->
                    <!--                          <WarnTriangleFilled />-->
                    <!--                        </el-icon>-->
                    <!--                      </div>-->
                    <!--                    </el-tooltip>-->
                  </li>
                </ul>
                <el-divider style="margin-top: 20px"/>
                <div class="uploader-info">
                  <div
                      class="headshot"
                      :style="{
                      'background-image':
                        'url(&#34;' +
                        commonApi.getHeadshot(videoInfo.user.headshot) +
                        '&#34;)',
                    }"
                  ></div>
                  <div>
                    <h4 class="text-hidden__1">
                      {{ userName(videoInfo.user.name, videoInfo.user.id) }}
                    </h4>
                    <el-button
                        :type="videoInfo.user.isFollow ? 'primary' : ''"
                        @click="follow"
                    >{{
                        videoInfo.user.isFollow ? "已关注" : "关注"
                      }}{{
                        " " + numberConversion(Number(videoInfo.user.fansCount))
                      }}
                    </el-button>
                  </div>
                </div>
                <el-divider/>
                <!-- 简介 -->
                <div class="text-area text-hidden__8">
                  {{ videoInfo.describe }}
                </div>
                <!-- 标签区 -->
                <div>
                  <el-tag
                      v-for="tag in videoTags"
                      @click="searchTag(tag.name)"
                      type="info"
                      class="mx-1 link obviously-beat"
                      effect="light"
                      round
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
                <el-divider/>
              </el-footer>
            </el-aside>
          </el-container>
        </el-container>
        <!-- 评论区 -->
        <el-footer class="comment-area">
          <CommentArea :commentCount="videoInfo.commentCount"></CommentArea>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import VideoPlayer from "./video-player/VideoPlayer.vue";
import CommentArea from "./comment-area/CommentArea.vue";
import videoApi from "@/api/video";
import tagApi from "@/api/tag";
import {
  VideoPlay,
  Postcard,
  Clock,
  WarnTriangleFilled
} from "@element-plus/icons-vue";
import { dateConversion, userName, numberConversion } from "@/utils/common";
import commonApi from "@/api/common";
import likeApi from "@/api/like";
import followApi from "@/api/follow";
import collectFolderApi from "@/api/collectFolder";
import { Video } from "@/types/video";
import { Tag } from "@/types/tag";
import router from "@/router/router";

const route = useRoute();
const videoInfo = ref<Video>(<Video>{user: {}});
const videoTags = ref<Tag[]>([]);
const videoPlayer = ref<HTMLElement | null>(null);

const getVideoInfo = async (videoId: string) => {
  // 获取视频信息
  videoApi.getVideoById(videoId).then((res) => {
    res.data
    if (res.data.code === 0) {
      document.title = res.data.data.title;
      videoInfo.value = res.data.data;
      // @ts-ignore
      videoPlayer.value?.init(res.data.data.videoPath);
    }
  });
};

const getVideoTags = async (videoId: string) => {
  // 获取视频标签
  const {code, data} = await tagApi.getByVideoId(videoId);
  if (code === 0) {
    videoTags.value = data;
  }
};

// 点赞评论
const videoLike = () => {
  likeApi.likeVideo(videoInfo.value.id, videoInfo.value.isLike).then((res) => {
    if (res.data.code === 0) {
      videoInfo.value.isLike = !videoInfo.value.isLike;
      videoInfo.value.likeCount =
        "" +
        (videoInfo.value.isLike
          ? Number(videoInfo.value.likeCount) + 1
          : Number(videoInfo.value.likeCount) - 1);
    }
  });
};

// 收藏视频
const videoCollect = () => {
  collectFolderApi
    .collect(videoInfo.value.id, !videoInfo.value.isCollect)
    .then((res) => {
      if (res.data.code === 0) {
        videoInfo.value.isCollect = !videoInfo.value.isCollect;
        if (videoInfo.value.isCollect) {
          videoInfo.value.collectCount =
            "" + (Number(videoInfo.value.collectCount) + 1);
        } else {
          videoInfo.value.collectCount =
            "" + (Number(videoInfo.value.collectCount) - 1);
        }
      }
    });
};

// 关注作者
const follow = () => {
  followApi
    .follow(videoInfo.value.user.id, !videoInfo.value.user.isFollow)
    .then((res) => {
      if (res.data.code === 0) {
        videoInfo.value.user.isFollow = !videoInfo.value.user.isFollow;
        if (videoInfo.value.user.isFollow) {
          videoInfo.value.user.fansCount =
            Number(videoInfo.value.user.fansCount) + 1 + "";
        } else {
          videoInfo.value.user.fansCount =
            Number(videoInfo.value.user.fansCount) - 1 + "";
        }
      }
    });
};

// 点击tag搜索
const searchTag = (tagName: string) => {
  if (tagName.length > 0) {
    router.toSearch(tagName);
  }
}

const watchRoute = watch(
  () => route.params.id,
  (newValue, oldValue) => {
    getVideoInfo(newValue + "");
    getVideoTags(newValue + "");
  },
  {immediate: true}
);

onUnmounted(() => {
  watchRoute();
})
</script>

<style lang="scss" scoped>
.common-layout__video {
  width: 90%;
  margin: 0 auto;

  * {
    text-align: left;
  }

  .el-main {
    width: 70%;
    // max-height: 600px;
    aspect-ratio: 8 / 5;
  }

  .video-info-header {
    height: auto;
    margin-top: 10px;

    h3 {
      font-size: 20px;
      color: #6c6c6c;
    }
  }

  .video-info-footer {
    --el-footer-height: revert;
    position: relative;

    ul {
      display: flex;
      align-content: center;
      position: relative;

      margin-top: 15px;

      & > li {
        margin-right: 15px;

        i {
          position: relative;
          top: 2px;
        }
      }

      &:nth-child(2) li img {
        width: 25px;
        height: 25px;
      }
    }

    & > p {
      width: 100%;
    }
  }

  .mx-1.el-tag.el-tag--info {
    margin: 10px 3px 3px;
  }

  .mx-1.el-tag.el-tag--info:hover {
    --el-tag-bg-color: var(--el-color-primary-light-7);
    --el-tag-border-color: var(--el-color-primary-light-8);
    --el-tag-hover-color: var(--el-color-primary);
    --el-tag-text-color: var(--el-color-primary);
  }

  .comment-area {
    height: auto;
  }

  .uploader-info {
    display: flex;

    .headshot {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      box-shadow: 0 0 2px 2px #cecece;

      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;

      & + div {
        margin-left: 20px;
      }
    }

    h4 {
      margin-bottom: 5px;
    }
  }
}
</style>
